<template>
    <div>
        <!-- 搜索框组件 -->
        <van-search v-model="value" placeholder="请输入搜索关键词" shape="round" @search="searchFn()" @clear="clearFn()" />
        <!-- 搜索框下容器 热词搜索 -->
        <div class="search_wrap" v-if="goodList.length === 0">
            <!-- 标题 -->
            <p class="hot_title">热门搜素</p>
            <!-- 热搜词容器 -->
            <div class="hot_name_wrap">
                <span class="hot_item" v-for="(item, index) in hotList" :key="index" @click="hotClick(item.first)">
                    {{ item.first }}</span>
            </div>
        </div>

        <!-- 搜索框下容器 最佳推荐 -->
        <div class="search_wrap" v-else>
            <!-- 标题 -->
            <p class="hot_title">最佳匹配</p>
            <!-- 热搜词容器 -->
            <div class="hot_name_wrap">
                <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <van-cell center :title="item1.name" :label="item1.ar[0].name + '-' + item1.name"
                        v-for="item1 in goodList" :key="item1.id">
                        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
                        <template #right-icon>
                            <van-icon name="play-circle-o" size="0.7rem" />
                        </template>
                    </van-cell>
                </van-list>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            page: 1,
            value: '',//搜索框绑定的值
            hotList: [],//热词数组
            goodList: [],//最佳推荐数组
            loading: false,//加载中，只有设置为false的时候，才会触发load，设置为true则不会触发
            finished: false,//未加载全部,如果设置为true的情况，触底不会执行Loda方法，代表你的数据加载完了
        }
    },
    methods: {
        //封装的方法
        async fn() {
            return await this.$http.get('/cloudsearch', {
                params: {
                    keywords: this.value,
                    limit: 20,
                    offset: (this.page - 1) * 20
                }
            })
        },
        async getHotList() {
            const res = await this.$http.get('/search/hot')
            this.hotList = res.data.result.hots
        },
        //搜索事件
        searchFn() {
            this.finished = false
            this.loading = false
            if(this.value.length === 0){
                this.goodList =[]
                return
            }
            this.fn().then(res => {
            
                if(res.data.result.songs === undefined){
                    this.goodList = []
                    return
                }
                this.goodList = res.data.result.songs
            })

        },
        //清除事件
        clearFn() {
            this.goodList = []
        },
        async hotClick(value) {
            this.loading = false
            this.finished = false
            this.value = value
            const res = await this.fn();
            this.goodList = res.data.result.songs
        },
        // 触底加载事件，内部会自动将loading改为true
       async onLoad(){
            // console.log("123");
            this.page++;
            const res = await this.fn();
            if(res.data.result.songs === undefined){
                this.finished = true;
                this.loading = false
                return 
            }
            this.goodList = [...this.goodList,...res.data.result.songs]
            this.loading = false
        }
    },
    mounted() {
        this.getHotList();
    }
}
</script>

<style lang="scss" scoped>
/* 搜索容器的样式 */
.search_wrap {
    padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
    font-size: 0.32rem;
    color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
    margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
    display: inline-block;
    height: 0.853333rem;
    margin-right: 0.213333rem;
    margin-bottom: 0.213333rem;
    padding: 0 0.373333rem;
    font-size: 0.373333rem;
    line-height: 0.853333rem;
    color: #333;
    border-color: #d3d4da;
    border-radius: 0.853333rem;
    border: 1px solid #d3d4da;
}
</style>